<template>
  <div class="tabs-pane-item2">
    <!--按日期-->
    <div class="item-box">
      <div class="chart-title"><span>按日期</span>
      </div>
      <adv-chart v-loading="loading1" id="OrderDate" :chart-data="orderByTimeData" ref="OrderDateRef"></adv-chart>
    </div>
    <!--按媒体-->
    <div class="item-box">
      <div class="chart-title"><span>按媒体</span>
      </div>
      <adv-chart v-loading="loading2" id="OrderPlatform" chart-type="bar" :chart-data="orderByPlatformsData"
                 y-axis="platform"
                 ref="OrderPlatformRef"></adv-chart>
    </div>
    <!--按媒体分天-->
    <div class="item-box">
      <div class="chart-title"><span>按媒体分天</span>
        <el-select v-model="platformValue" placeholder="请选择" size="mini" @change="getfilterPlatformsData">
          <el-option v-for="(item,index) in platformsList"
                     :key="index"
                     :value="item.dictKey"
                     :label="item.dictValue">
          </el-option>
        </el-select>
      </div>
      <adv-chart v-loading="loading3" id="FilterPlatform" :chart-data="filterPlatformsData"
                 ref="FilterPlatformRef"></adv-chart>
    </div>
    <!--按国家地区-->
    <div class="item-box">
      <div class="chart-title"><span>按国家地区</span>
      </div>
      <adv-chart v-loading="loading4" id="OrderNation" :chart-data="orderByNationData" ref="OrderNationRef"
                 y-axis="country"></adv-chart>
    </div>
    <!--按国家地区分天-->
    <div class="item-box">
      <div class="chart-title"><span>按国家地区分天</span>
        <el-select v-model="countryValue" placeholder="请选择" size="mini" filterable @change="getFilterNateionData">
          <el-option
            v-for="(item,index) in adCountryList"
            :key="index"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </div>
      <adv-chart v-loading="loading5" id="FilterNation" :chart-data="filterNateionData"
                 ref="FilterNationRef"></adv-chart>
    </div>
  </div>
</template>

<script>
import AdvChart from "@/views/dataReport/review-report/components/AdvChart";
import {getGeoList, getSysDictList} from "@/api/system/dict";
import {
  queryAdCountryList, queryPlatformList,
  queryReviewReportAdReport,
  queryReviewReportByCountry,
  queryReviewReportByPlatform
} from "@/api/dataReport/review-report";

export default {
  name: "AdvertisingReport",
  components: {
    AdvChart
  },
  props: {
    reportId: {
      type: Number | String,
      required: true
    }
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      orderByTimeData: [],// 按日期
      orderByPlatformsData: [],
      filterPlatformsData: [],
      orderByNationData: [],
      filterNateionData: [],
      platformsList: [],//媒体列表
      platformValue: '',
      nationList: [],//国家列表
      countryValue: '',
      adCountryList: []
    }
  },
  async created() {
    // 过滤媒体需要同步
    await this.getPlatformsList()
    await this.getAdPlatformsList()
    this.getOrderByTimeData()
    this.getfilterPlatformsData()
    this.getOrderByPlatformsData()
    this.getOrderByNationData()
    // 过滤国家需要同步
    await this.getNationList()
    await this.getAdCountryList()
    await this.getFilterNateionData()


  },
  mounted() {
  },
  methods: {
    // 获取媒体列表
    async getPlatformsList() {
      const {platforms} = await getSysDictList('platforms')
      this.platformsList = platforms
    },
    // 获取当前订单的媒体
    async getAdPlatformsList() {
      const {data:res} = await queryPlatformList({reportId: this.reportId})
      if (res.code !== 200) return
      this.platformValue = res.data.length > 0 ? res.data[0]: ''
      const platforms = res.data
      this.platformsList = this.platformsList.filter(item => platforms.includes(item.dictKey))
    },
    // 获取国家列表
    async getNationList() {
      const {nation: res} = await getSysDictList('nation')
      this.nationList = res
      console.log('国家字典',this.nationList)
    },
    // 获取当前报告的国家列表
    async getAdCountryList() {
      const {data: res} = await queryAdCountryList({reportId: this.reportId})
      if (res.code !== 200) return
      // 默认返回国家查询
      this.countryValue = res.data.length > 0 ? res.data[0]: ''
      const countryList = res.data
      this.adCountryList = this.nationList.filter(item => countryList.includes(item.dictKey))
      // console.log('cl', this.adCountryList)
    },
    // 按日期
    async getOrderByTimeData() {
      this.loading1 = true
      const {data: res} = await queryReviewReportAdReport({reportId: this.reportId})
      this.loading1 = false
      if (res.code !== 200) return
      this.orderByTimeData = res.data.map(item => {
        item.reportDate = item.reportDate.split(' ')[0]
        return item
      })
      this.$nextTick(() => {
        this.$refs.OrderDateRef.initChart()
      })
    },
    // 按媒体
    async getOrderByPlatformsData() {
      this.loading2 = true
      const {data: res} = await queryReviewReportByPlatform({groupByDate: 0, reportId: this.reportId, platform: ''})
      this.loading2 = false
      if (res.code !== 200) return
      this.orderByPlatformsData = res.data
      this.$nextTick(() => {
        this.$refs.OrderPlatformRef.initChart()
      })
    },
    // 按媒体分天
    async getfilterPlatformsData() {
      this.loading3 = true
      const {data: res} = await queryReviewReportByPlatform({
        groupByDate: 1,
        reportId: this.reportId,
        platform: this.platformValue
      })
      this.loading3 = false
      if (res.code !== 200) return
      this.filterPlatformsData = res.data.map(item => {
        item.reportDate = item.reportDate.split(' ')[0]
        return item
      })
      this.$nextTick(() => {
        this.$refs.FilterPlatformRef.initChart()
      })
    },
    // 按国家地区
    async getOrderByNationData() {
      this.loading4 = true
      const {data: res} = await queryReviewReportByCountry({groupByDate: 0, reportId: this.reportId, country: ''})
      this.loading4 = false
      if (res.code !== 200) return
      this.orderByNationData = res.data.map(item => {
        const key = item.country
        const obj = this.nationList.find(item => item.dictKey === key)
        if (obj !== undefined) {
          item.country = obj.dictValue
        }
        return item
      })
      this.$nextTick(() => {
        this.$refs.OrderNationRef.initChart()
      })
    },
    // 按国家地区分天
    async getFilterNateionData() {
      this.loading5 = true
      const {data: res} = await queryReviewReportByCountry({
        groupByDate: 1,
        reportId: this.reportId,
        country: this.countryValue
      })
      this.loading5 = false
      if (res.code !== 200) return
      this.filterNateionData = res.data.map(item => {
        item.reportDate = item.reportDate.split(' ')[0]
        return item
      })
      // setTimeout(() => {
      //   console.log('2秒了')
      //   this.$refs.FilterNationRef.initChart()
      // },2000)
      this.$nextTick(() => {
        this.$refs.FilterNationRef.initChart()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-pane-item2 {
  .item-box {
    .chart-title {
      font-size: 18px;
      font-family: SimHei;
      font-weight: bold;
      color: #101010;
      box-sizing: border-box;

      &:before {
        content: '';
        display: inline-block;
        width: 13px;
        height: 32px;
        background-color: #FF944B;
        border-radius: 25%;
        vertical-align: -40%;
        margin-right: 20px;
      }

      span {
        margin-right: 20px;
      }
    }
  }
}
</style>
